<template>
  <div>
    <!-- 上 -->
    <el-card  class="co-middle">
          <el-form :inline="true"  class="demo-form-inline">
             <el-form-item label="快递员账号:" label-width="px" >
    <el-input v-model="pageing.account" placeholder="请输入账号" clearable></el-input>
  </el-form-item >
  <el-form-item label="快递员姓名:" label-width="200px" >
      <el-input v-model="pageing.name" placeholder="请输入姓名" clearable></el-input>
  </el-form-item >
   <el-form-item label="快递员手机号:"  label-width="200px" >
    <el-input v-model="pageing.phone" placeholder="请输入手机号" clearable></el-input>
  </el-form-item>
        </el-form>
        <!--  -->
        <el-form :inline="true"  class="demo-form-inline">
  <el-form-item label="所属机构:" label-width="108px">
     <template>
      <Treeselect
      style="margin-left:10px;"
       class="treeselect-main"
                v-model="pageing.agentId"
                :options="tree"
                :normalizer="normalizer"
                placeholder="请选择起始地机构"
                 :append-to-body="true"
              />
     </template>
  </el-form-item>
   <el-form-item class="anniu">
    <el-button type="danger" @click="search">搜索</el-button>
    <el-button @click="reset">重置</el-button>
  </el-form-item>
       </el-form>
      </el-card>
      <!-- 下 -->
      <el-card>
        <el-table  stripe :data="tableData" style="width: 100%">
    <el-table-column  label="序号" width="100" type="index"></el-table-column>
    <el-table-column prop="account" label="快递员账号" width="250"></el-table-column>
    <el-table-column prop="name" label="快递员姓名" width="300"> </el-table-column>
    <el-table-column prop="mobile" label="快递员手机号"  width="280"> </el-table-column>
    <el-table-column prop="agency.name" label="所属机构" width="260"></el-table-column>
      <el-table-column prop="status" label="工作状态"  width="250" :formatter="formatRole">
           <template #default="{row}">
            <el-badge is-dot class="item"  type="success" v-if="row.status"></el-badge>
             <el-badge is-dot class="item"  v-else></el-badge>
             {{row.status?'上班':'不上班'}}
           </template>
     </el-table-column>
    <el-table-column  label="操作"  width="110" fixed="right">
      <template #default="{row}">
        <el-button @click="$router.push(`couriermanagement/distribution/${row.id}`)" type="text" size="small">作业范围分配</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageing.page"
      :page-sizes="[5, 10, 30, 50]"
      :page-size="pageing.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
      </el-card>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getemployeePage } from '@/api/couriermanagement'
import { treeShapedApi } from '@/api/institution'
export default {
  name: 'courier-management',
  components: {
    Treeselect
  },
  data () {
    return {
      tree: [], // 树形数据
      formInline: {
        user: '',
        region: ''
      },
      tableData: [],
      pageing: {
        page: 1,
        pageSize: 10,
        name: '',
        phone: '',
        account: '',
        agentId: null
        // mobile: null
      },
      record: [],
      total: 0
    }
  },
  created () {
    this.getCourierList()
    this.initTree()
  },
  methods: {
    handleSizeChange (newSize) {
      this.pageing.pageSize = newSize
      this.getCourierList()
    },
    handleCurrentChange (newPage) {
      this.pageing.page = newPage
      this.getCourierList()
    },
    // 下拉树形结构
    async initTree () {
      const res = await treeShapedApi()
      this.tree = JSON.parse(res.data)
      console.log(this.tree)
    },
    normalizer (node) {
      // console.log(node)
      // 当子节点也就是children=[]时候去掉子节点
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children && node.children.length > 0 ? node.children : 0
      }
    },
    // 工作状态处理
    formatRole: function (row, column) {
      // console.log(row)
      return row.status === 1 ? '上班' : '不上班'
    },
    // 初始渲染
    async   getCourierList () {
      const res = await getemployeePage({ ...this.pageing })
      console.log(res)
      this.total = +res.data.counts
      this.tableData = res.data.items
      // console.log(this.record)
    },
    // 点击搜索
    async  search () {
      // this.getCourierList()
      const res = await getemployeePage({ ...this.pageing })
      // console.log(res)
      this.tableData = res.data.items
      // console.log(this.tableData)
      // this.getCourierList()
    },
    // 点击重置
    reset () {
      this.pageing = {
        page: 1,
        pageSize: 10
      }
      this.getCourierList()
    }
  }
}
</script>

<style lang="scss" scoped>
.anniu {
  margin-left: 60px;
}
.co-middle {
  margin-bottom: 20px;
}
.item {
  margin-top: 5px;
}
::v-deep .vue-treeselect__control {
    padding-left: 5px;
    padding-right: 5px;
    display: table;
    table-layout: fixed;
    /* width: 100%; */
    width: 180px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
    transition-duration: 200ms;
    transition-property: border-color, box-shadow, width, height, background-color, opacity;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.demo-form-inline {
  display: flex;
}
.vue-treeselect__single-value {
  display: none;
}
</style>
